<template>
  <div>
    <el-dialog v-bind="dialogProps" :before-close="handleClose" :close-on-click-modal="false"
               :destroy-on-close="true" fullscreen>
      <div class="steps">
        <el-steps direction="horizontal" finish-status="success" :active="1" align-center>
          <el-step v-for="step in steps" :key="step.code" :title="step.processName"></el-step>
        </el-steps>
      </div>
      <div class="expand1" @click="handleExpandAll">
        <svg-icon icon-class="list"></svg-icon>
        {{
          !showAll ? '展开工单信息' : '隐藏工单信息'
        }}
      </div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm"
               size="small">
        <div v-if="showAll">
          <div class="formtop">
            <div class="formcenter">工单基本信息</div>
            <div class="formbottom" v-if="showBasic">
              <el-row gutter="16" justify="start">
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                  <el-form-item label="工单名称:" prop="taskName">
                    <el-input v-model="ruleForm.taskName" placeholder="无数据" clearable disabled>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                  <el-form-item label="工单编号:" prop="taskNo">
                    <el-input v-model="ruleForm.taskNo" placeholder="无数据" clearable disabled>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                  <el-form-item label="单位:" prop="deptName">
                    <el-input v-model="ruleForm.deptName" placeholder="无数据" clearable disabled>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                  <el-form-item label="盘点对象:" prop="warehouseName">
                    <el-input v-model="ruleForm.warehouseName" placeholder="无数据" clearable disabled>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                  <el-form-item label="盘点人:" prop="personName">
                    <el-input v-model="ruleForm.personName" placeholder="无数据" clearable disabled>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                  <el-form-item label="任务类型:" prop="taskTypeName">
                    <el-input v-model="ruleForm.taskTypeName" placeholder="无数据" clearable
                              disabled></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                  <el-form-item label="计划开始时间:" prop="planStime">
                    <el-input v-model="ruleForm.planStime" placeholder="无数据" clearable disabled>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                  <el-form-item label="计划结束时间:" prop="planEtime">
                    <el-input v-model="ruleForm.planEtime" placeholder="无数据" clearable disabled>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                  <el-form-item label="盘点内容:" prop="description">
                    <el-input v-model="ruleForm.description" placeholder="无数据" clearable disabled
                              type="textarea"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                  <el-form-item label="备注:" prop="description">
                    <el-input v-model="ruleForm.description" placeholder="无数据" clearable disabled
                              type="textarea"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>

          </div>


        </div>
        <div>
          <div class="formtop">
            <div class="formcenter">接派单信息</div>
            <div class="formbottom" v-if="showPaidan">
              <el-row gutter="16" justify="start">
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                  <el-form-item label="派单人:" prop="sendPerson">
                    <el-input v-model="ruleForm.sendPerson" placeholder="无数据" clearable
                              disabled></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                  <el-form-item label="派单人电话:" prop="sendTel">
                    <el-input v-model="ruleForm.sendTel" placeholder="无数据" clearable disabled>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                  <el-form-item label="派单时间:" prop="sendTime">
                    <el-input v-model="ruleForm.sendTime" placeholder="无数据" clearable disabled>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                  <el-form-item label="接单人:" prop="receiver">
                    <el-input v-model="ruleForm.receiver" placeholder="无数据" clearable
                              disabled></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                  <el-form-item label="接单时间:" prop="receivingTime">
                    <el-input v-model="ruleForm.receivingTime" placeholder="无数据" clearable disabled>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                  <el-form-item label="接单时间:" prop="receivingTime" v-show="1==2">
                    <el-input v-model="ruleForm.receivingTime" placeholder="无数据" clearable disabled>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </div>


        </div>
        <div>
          <div class="formtop">
            <div class="formcenter">现场盘点</div>
            <div class="formbottom" v-if="showPandain">
              <vxe-table border stripe ref="selectedEquip" height="200" :data="list.data">
                <vxe-column field="equipTypeName" title="设备类型" align="center" minWidth="150"></vxe-column>
                <vxe-column field="scanNum" title="扫一扫" align="center" minWidth="150"></vxe-column>
                <vxe-column field="manualNum" title="手动新增" align="center" minWidth="150"></vxe-column>
                <vxe-column field="totalNum" title="盘点总数" align="center" minWidth="150">
                  <template v-slot="{ row }">
                    <span class="textColor" @click="handlePandianList(row,'盘点总数明细')">{{ row.totalNum }}</span>
                  </template>
                </vxe-column>
                <vxe-column field="stockNowNum" title="库存数量" align="center" minWidth="150">
                  <template v-slot="{ row }">
                    <span class="textColor" @click="handlePandianList(row,'库存数量明细')">{{ row.stockNowNum }}</span>
                  </template>
                </vxe-column>
                <vxe-column field="matchNum" title="匹配数量" align="center" minWidth="150">
                  <template v-slot="{ row }">
                    <span class="textColor" @click="handlePandianList(row,'匹配数量明细')">{{ row.matchNum }}</span>
                  </template>
                </vxe-column>
                <vxe-column field="diffNum" title="差异" align="center" minWidth="150">
                  <template v-slot="{ row }">
                    <span class="textColor" @click="handlePandianList(row,'差异明细')">{{ row.diffNum }}</span>
                  </template>
                </vxe-column>
              </vxe-table>
            </div>
          </div>

        </div>
        <div>
          <div class="formtop">
            <div class="formcenter">缺陷信息</div>
            <div class="formbottom" v-if="showyinhuan">
              <vxe-table border stripe ref="selectedEquip" height="200" :data="list2.data">
                <vxe-column type="seq" title="序号" width="60" align="center"></vxe-column>
                <vxe-column field="defectStatusName" title="审核结果" align="center" minWidth="150"></vxe-column>
                <vxe-column field="unitName" title="单位" align="center" minWidth="150">
                </vxe-column>
                <vxe-column field="equipName" title="设备名称" align="center" minWidth="150">
                </vxe-column>
                <!-- <vxe-column field="equipNo" title="出厂编码" align="center" minWidth="150">
                </vxe-column> -->
                <vxe-column field="equipTypeName" title="设备类型" align="center" minWidth="150">
                </vxe-column>
                <vxe-column field="defectName" title="缺陷名称" align="center" minWidth="150">
                </vxe-column>
                <vxe-column field="defectAddress" title="缺陷地点" align="center" minWidth="150">
                </vxe-column>
                <vxe-column field="defectParts" title="缺陷部位" align="center" minWidth="150">
                </vxe-column>
                <vxe-column field="partName" title="部件名称" align="center" minWidth="150">
                </vxe-column>
                <vxe-column field="defectDescription" title="缺陷描述" align="center" minWidth="150">
                </vxe-column>
                <vxe-column field="creatTime" title="发现日期" align="center" minWidth="150">
                </vxe-column>
                <vxe-column field="isHandle" title="是否已处理" align="center" minWidth="150">
                </vxe-column>
                <vxe-column field="afterPictureIds" title="处理后照片" align="center" minWidth="150">
                  <template v-slot="{ row }">
                    <div v-for="(item,index) in row.showPhone">
                      <el-image style="width: 60px; height: 30px;" :src="item" :preview-src-list="item" alt=""/>
                      <!-- <img style="width: 60px; height: 30px;" :src="item[index]" alt="" /> -->
                    </div>


                  </template>
                </vxe-column>
                <vxe-column field="noSiteResult" title="未处理原因" align="center" minWidth="150">
                </vxe-column>
              </vxe-table>
              <vxe-pager perfect size="mini" :current-page="list2.pageNo" :page-size="list2.pageSize"
                         :page-sizes="list2.pageSizes" :total="list2.total"
                         :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
                         @page-change="handlePageChange1">
              </vxe-pager>
            </div>
          </div>

        </div>
        <div>

          <div class="formtop">
            <div class="formcenter">结论报告</div>
            <div class="formbottom" v-if="showJielun">
              <el-row gutter="16" justify="start">
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                  <el-form-item label="" prop="conclusion" label-width="0">
                    <el-input v-model="ruleForm.conclusion" clearable
                              disabled type="textarea"></el-input>
                  </el-form-item>
                </el-col>

              </el-row>
            </div>
          </div>


        </div>
        <div>
          <div class="formtop">
            <div class="formcenter">工单规范性评价</div>
            <div class="formbottom" v-if="showPingjia">
              <el-row gutter="16" justify="start">
                <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                  <el-form-item v-if="isDisabled" label="评价结论:" prop="appraiseStatusName">
                    <el-input v-model="ruleForm.appraiseStatusName" disabled placeholder="无数据" clearable
                              :disabled="isDisabled"></el-input>
                  </el-form-item>
                  <el-form-item v-if="!isDisabled" label="评价结论:" prop="appraiseStatus">
                    <el-select v-model="ruleForm.appraiseStatus" disabled placeholder="请选择评价结论" clearable
                               style="width: 100%" @change="appraiseStatusChange">
                      <el-option v-for="item in appraiseStatusOptions" :key="item.value" :label="item.label"
                                 :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                  <el-form-item label="评价人:" prop="appraisePerson">
                    <el-input v-model="ruleForm.appraisePerson" placeholder="无数据" clearable
                              disabled></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                  <el-form-item label="评价时间:" prop="appraiseTime">
                    <el-input v-model="ruleForm.appraiseTime" placeholder="无数据" clearable
                              disabled></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                  <el-form-item v-show="!appraiseContentShow" label="评价说明:" prop="appraiseContent">
                    <el-input v-model="ruleForm.appraiseContent" placeholder="无数据" clearable
                              disabled type="textarea"></el-input>
                  </el-form-item>
                  <el-form-item v-show="appraiseContentShow" label="评价说明:">
                    <el-input v-model="ruleForm.appraiseContent" placeholder="无数据" clearable
                              disabled type="textarea"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </div>


        </div>
      </el-form>
      <equipmentList ref="equipmentList"></equipmentList>
    </el-dialog>
  </div>
</template>
<script>
import {workOrderModelForm2} from "../model/workOrderModelForm2";
import {workOrderManagement} from '@/api/defects/workOrderManagement.js'
import {preparationTask} from '@/api/defects/preparationTask.js'
import equipmentList from "./equipmentList.vue"

export default {
  components: {equipmentList},
  data() {
    return {
      isDisabled: true,
      srcList: [],
      showPhone: [],
      showBox: true,
      appraiseContentShow: false,
      dialogProps: {
        visible: false,
        title: "过程监视",
        top: '5px',
        class: 'monitor-dialog-container',
        // width: '70%'
      },
      size: "medium",
      ruleForm: workOrderModelForm2.FormData,
      rules: workOrderModelForm2.rules,
      appraiseStatusOptions: [{label: '合格', value: '1'}, {label: '不合格', value: '2'},],
      row: {},
      showSteps: [],
      steps: [
        {
          isNode: 1,
          isActive: 1,
          processDate: '2017-12-11 14：01',
          processName: '任务编制',
          code: '1',
          stepName: 'bianzhi',
          stepStatus: 'already',
          lineImg: 'buzhou1'
        },
        {
          isNode: 0,
          isActive: 0,
          processDate: '2017-12-11 14：01',
          processName: '派单',
          code: '2',
          stepName: 'paidan',
          stepStatus: 'already',
          lineImg: 'buzhou2'
        },
        {
          isNode: 0,
          isActive: 0,
          processDate: '2017-12-11 14：01',
          processName: '接单',
          code: '3',
          stepName: 'jiedan',
          stepStatus: 'isNode',
          lineImg: 'buzhou6'
        },
        {
          isNode: 0,
          isActive: 0,
          processDate: '2017-12-11 14：01',
          processName: '开始检测',
          code: '4',
          stepName: 'jiance',
          stepStatus: 'not',
          lineImg: 'buzhou7'
        },

        {
          isNode: 0,
          isActive: 0,
          processDate: '2017-12-11 14：01',
          processName: '工单规范性评价',
          code: '5',
          stepName: 'pingjia',
          stepStatus: 'not',
          lineImg: 'buzhou7'
        },
        {
          isNode: 0,
          isActive: 0,
          processDate: '',
          processName: '归档',
          code: '7',
          stepName: 'guidang',
          stepStatus: 'not',
          lineImg: 'buzhou3'
        }
      ],
      list: {
        data: [{
          sblxmc: '开闭器',
          kcs: '133',
          ppsl: '100',
          cy: '122'
        }]
      },
      list1: {
        data: []
      },
      list2: {
        data: [],
        pageNo: 1,
        pageSize: 10,
        pageSizes: [10, 20, 50, 100],
        total: 0
      },
      showAll: true,
      showPaidan: true,
      showBasic: true,
      showPandain: true,
      showyinhuan: true,
      showJielun: true,
      showPingjia: true,

    };
  },
  methods: {
    //二级页面初始化
    showDialog(row, isEdit) {
      // this.row = row.row
      //清空节点信息
      this.showSteps = []
      this.$nextTick(() => {
        preparationTask.getEquipDataById(row.taskNo).then(res => {

          this.row = res.data[0] || {}

          this.dialogProps.visible = true;
          this.fetchProcess()
          this.getTable(res.data[0].taskNo)
          for (let key in this.ruleForm) {
            this.ruleForm[key] = this.row[key]
          }
        })
      })
    },
    //缺陷信息
    getTable(taskNo) {
      this.list2.data = []
      this.list2.pageNo = 1
      this.list2.pageSize = 10
      this.showPhone = []
      this.srcList = []
      let queryParams = {
        column: '',
        entity: {
          taskNo: taskNo
        },
        order: '',
        pageNo: this.list2.pageNo,
        pageSize: this.list2.pageSize,
        paramsMap: {}
      }
      preparationTask.defectDefect(queryParams).then(res => {
        this.list2 = {
          data: res.data.records,
          pageNo: res.data.pageNo,
          pageSize: res.data.pageSize,
          total: res.data.total
        }
        this.list2.data.map((item) => {

          if (item.isHandle == 0) {
            item.isHandle = '未处理'
          } else if (item.isHandle == 1) {
            item.isHandle = '已处理'
          }
          item.showPhone = []
          // this.showPhone.push({url1:item.defectPictureIds.split(',')[0],url2:item.defectPictureIds.split(',')[1]})

          if (item.sitePictureIds) {
            if (item.sitePictureIds.includes(",")) {
              this.showPhone.push(item.sitePictureIds.split(','))

            } else {
              this.showPhone.push(item.sitePictureIds.split(' '))
            }
            //         for(let i =0;i<this.showPhone.length;i++){
            //          for(let j =0;j<this.showPhone[i].length;j++){
            //         this.showPhone[i][j] = this.udsImageUrl +this.showPhone[i][j] + "/user.png"
            //         this.srcList.push(this.showPhone[i][j])
            //     }
            // }
            let d
            this.showPhone.map((item) => {
              d = item
            })
            item.showPhone.push(d)
          }
        })
      })
      preparationTask.getEquipStatistics(this.row.taskNo).then(res => {
        this.list.data = res.data
      })
    },
    handlePageChange1({currentPage, pageSize}) {

      this.list2.pageNo = currentPage;
      this.list2.pageSize = pageSize;
      this.getTable()
    },
    handleExpandAll() {
      if (!this.showAll) {
        this.showPaidan = false

      }
      this.showAll = !this.showAll
    },
    fetchProcess() {
      workOrderManagement.getTaskOperateList(this.row.taskNo).then(res => {
        this.showSteps = res.data.operateVoList.map((d, i) => {
          const item = this.steps.find(b => b.code === d.code)
          d.stepName = item.stepName
          d.stepStatus = d.isNode ? 'isNode' : d.isActive ? 'already' : 'not'
          if (i === 0) {
            d.lineImg = d.isNode ? 'buzhou5' : d.isActive ? 'buzhou1' : 'buzhou4'
          } else if (i === (res.data.operateVoList.length - 1)) {
            d.lineImg = d.isNode ? 'buzhou9' : d.isActive ? 'buzhou8' : 'buzhou3'
          } else {
            d.lineImg = d.isNode ? 'buzhou6' : d.isActive ? 'buzhou2' : 'buzhou7'
          }
          return d
        })
      })
    },


    //编辑渲染
    initData() {

    },

    //确定关闭
    handleClose(done) {

      this.dialogProps.visible = false;


    },
    appraiseStatusChange(value) {
      this.ruleForm.appraiseStatusName = '';
      if (value) {
        let arr = this.appraiseStatusOptions.filter(item => {
          return item.value == value;
        })
        if (arr && arr.length > 0) {
          this.ruleForm.appraiseStatusName = arr[0].label;
        }
      }
      if (value == '2') {
        this.appraiseContentShow = true
      } else {
        this.appraiseContentShow = false
      }

    },
    handlePandianList(row, title) {
      this.$refs.equipmentList.showDialog(true, row, false, title)
    }
  },
};

</script>
<style>
.textColor {
  color: #4e00fe;
}
</style>

